<template>
  <view class="merchant-header">
    <!-- 店铺信息 -->
    <view class="info-left">
      <text class="name">{{ merchant.name }}</text>
      <view class="meta">
        <text class="rating">{{ merchant.rating }}</text>
        <text class="month-sale">{{ merchant.monthSale }}</text>
        <text class="delivery-time">{{ merchant.deliveryTime }}</text>
      </view>
    </view>
    <!-- 优惠活动滚动 -->
    <view class="discounts">
      <uni-notice-bar :text="discountText" scrollable />
    </view>
  </view>
</template>

<script setup>
import { computed } from 'vue'
const props = defineProps({
  merchant: { type: Object, required: true }, // 店铺信息：{name, rating, monthSale, deliveryTime}
  discounts: { type: Array, default: () => [] } // 优惠文案数组
})
// 拼接优惠文案为滚动文本
const discountText = computed(() => props.discounts.map(i => i.text).join(' · '))
</script>

<style scoped>
.merchant-header {
  display: flex;
  padding: 20rpx;
  background: #fff;
  justify-content: space-between;
}
.info-left { flex: 1; }
.name { font-size: 34rpx; font-weight: bold; }
.meta { font-size: 24rpx; color: #999; margin-top: 8rpx; display: flex; gap: 16rpx; }
.discounts { width: 500rpx; }
</style>